<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px" style="max-width: 800px; margin: 20px auto;">
      <el-form-item label="酒店名称" prop="hotelName">
        <el-input v-model="form.hotelName" placeholder="请输入酒店名称"></el-input>
      </el-form-item>
      <el-form-item label="酒店图片" prop="hotelImage">
        <el-upload
          class="upload-demo"
          action="/api/upload"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
          :before-upload="beforeUpload">
          <img v-if="imageUrl" :src="imageUrl" alt="" style="max-width: 200px; max-height: 200px; margin-bottom: 10px;">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="酒店价格" prop="hotelPrice">
        <el-input-number v-model="form.hotelPrice" min="0" :precision="0" :step="100"></el-input-number>
        <span slot="append">元/晚</span>
      </el-form-item>
      <el-form-item label="酒店地址" prop="hotelAddress">
        <el-input v-model="form.hotelAddress" placeholder="请输入酒店地址"></el-input>
      </el-form-item>
      <el-form-item label="酒店评论数" prop="hotelCommentCount">
        <el-input-number v-model="form.hotelCommentCount" min="0" :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item label="关联城市" prop="cityId">
        <el-select v-model="form.cityId" placeholder="请选择关联城市">
          <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'HotelSystemAdminCc',

  data () {
    return {
      form: {
        hotelName: '',
        hotelImage: '',
        hotelPrice: 0,
        hotelAddress: '',
        hotelCommentCount: 0,
        cityId: ''
      },
      imageUrl: '',
      cities: []
    }
  },
  methods: {
    // 上传成功回调函数
    handleUploadSuccess (response, file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.hotelImage = response.url
    },
    // 上传前校验函数
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    // 提交表单
    submitForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log(this.form)
          // 调用后端 API 保存数据
          this.$http.post('/api/hotels', this.form).then(response => {
            this.$message.success('保存成功')
            // 重置表单
            this.resetForm()
          }).catch(error => {
            this.$message.error('保存失败')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetForm () {
      this.$refs.form.resetFields()
      this.imageUrl = ''
    },
    // 加载城市列表
    loadCities () {
      this.$http.get('/api/cities').then(response => {
        this.cities = response.data
      }).catch(error => {
        console.error('加载城市列表失败', error)
      })
    }
  },
  mounted () {
    this.loadCities()
  }
}
</script>

<style lang="less" scoped>
.pay-address {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
</style>
